<template>
  <div class="aboutf">
    <div class="aboutf-banner">
      <img :src="banner_bg" alt="">
    </div>
    <div class="aboutf-collapse">
      <div class="aboutf-collapse-container">
        <p>分秒金融是保通控股有限公司开发运营的网络借贷信息服务平台，致力于为广大投资者和有融资需求的企业或提供专业、高效、安全的网络借贷信息服务。</p>
        <p>保通控股有限公司是一家专门从事投资管理、资产管理、项目投资、投资咨询等业务的大型企业，注册资金5亿元，成立初期便获得央企多级全资子公司的战略投资。</p>
        <p v-show="textshow.text1show">公司为具有良好的过往业绩和信誉、经过检验的商业模式、具有吸引的高成长性龙头企业提供长期的资本支持。在企业已形成的具有可持续竞争优势的基础上，提供综合的提升其资本市场价值的增值服务，实现企业多梯级的业务发展目标。公司的投资管理团队拥有一支具备投资经验丰富和良好的职业素养的业界精英。</p>
        <p v-show="textshow.text1show">目前公司与政府、央企、大型国有公司及产业基金建立了良好的业务联系，具备“天时、地利、人和”的成长条件和发展背景。先后参与了蚌埠市智慧城市建设，凤阳北斗科研基地建设和唐山北斗卫星可视曹妃甸等重大国家和政府项目。与此同时，公司在智慧城市建设的过程中与中通安徽智慧城市投资有限公司、中科院以及保通数据技术有限公司等联合组建安徽开普卫星导航通信遥感有限公司，使北斗二代CAPS系统商业化成功推进；公司参与的北斗卫星通信“舒拉亚”系统也正在积极建设之中。未来公司会将旗下新能源技术开发、大功率半导体插件、进出口贸易等其他企业并入，成立集团化公司，并持续为您提供更全面完善的服务。</p>
      </div>
      <p><span class="icon-pulldown" @click="toggle($event, 'text1show')" data-toggle="0"></span></p>
    </div>

    <div class="aboutf-culture aboutf-component-title">
      <p><span></span>企业文化</p>
      <ul>
        <li v-for="item in culture" class="border-all-1px">
          <img :src="item.img" alt="">
          <div class="aboutf-culture-right">
            <p>{{ item.text1 }}</p>
            <p>{{ item.text2 }}</p>
          </div>
        </li>
      </ul>
    </div>
    <div class="aboutf-partner aboutf-component-title">
      <p><span></span>合作伙伴</p>
      <div class="aboutf-collapse">
        <div class="aboutf-collapse-container">
          <p>保通数据有限公司</p>
          <p>保通数据技术有限公司大型国有企业，主要从事北斗卫星通信相关设备的研发、生产、运营以及智慧城市研发、建设、运营的企业。公司下属保通数据（安徽）投资有限公司、中通智慧城市（安徽）投资有限公司、中通北斗科技（安徽）有限公司等多个子公司。</p>
          <p v-show="textshow.text2show">公司将北斗卫星通讯技术引入到智慧城市建设中，投资建设基于北斗卫星通讯的“北斗卫星智慧曹妃甸·石化港项目”项目。项目涵盖了城市建设、管理、运行的各个领域，运用信息和通讯技术手段感测、分析、整合城市建设、管理、运行的核心系统各项关键信息。从而对城市建设、管理、运行的各种需求做出智能响应，促进城市的和谐、可持续发展。</p>
        </div>
        <p><span class="icon-pulldown" @click="toggle($event, 'text2show')"></span></p>
      </div>
    </div>

    <div class="aboutf-footer">
      <div class="aboutf-footer-top">
        <img :src="logoImg" alt="分秒金融">
        <div class="vertical-1px"></div>
        <ul>
          <li><p><span class="icon-service"></span>400-608-2001</p></li>
          <li><p><span class="icon-address"></span>北京市东城区银河sohoC座1012室</p></li>
          <li><p><span class="icon-qq"></span>3312128192</p></li>
          <li><p><span class="icon-email"></span>kefu@fenmiaojinrong.com</p></li>
        </ul>
      </div>
      <div class="aboutf-footer-bottom">
        <p>@2016 分秒金融 All Rights Reserved 保通控股有限公司</p>
        <p>京ICP备16054465号</p>
        <p>市场有风险，投资需谨慎</p>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    data () {
      return {
        banner_bg: require('assets/about_us.png'),
        logoImg: require('assets/women_logo@3x.png'),
        textshow: {
          text1show: false,
          text2show: false
        },
        culture: [
          {
            img: require('assets/gyguanai@3x.png'),
            text1: '关爱是企业的初心',
            text2: '关爱他人才能奉献社会'
          },
          {
            img: require('assets/gychengxin@3x.png'),
            text1: '诚信是企业的生命',
            text2: '待人以诚才能赢得天下'
          },
          {
            img: require('assets/gywushi@3x.png'),
            text1: '务实是企业的根本',
            text2: '求真务实才能稳健发展'
          },
          {
            img: require('assets/gyyanjin@3x.png'),
            text1: '严谨是企业的态度',
            text2: '注重细节才能精益求精'
          },
          {
            img: require('assets/gychuangxin@3x.png'),
            text1: '创新是企业的灵魂',
            text2: '不断创新才能引领时代'
          }
        ]
      }
    },
    methods: {
      toggle (e, textshow) {
        this.textshow[textshow] = !this.textshow[textshow]
        const tar = e.target
        if (tar.dataset.toggle === '0') {
          tar.style.transform = 'rotate(180deg)'
          tar.dataset.toggle = '1'
        } else {
          tar.style.transform = ''
          tar.dataset.toggle = '0'
          this.height1 = 200
        }
      }
    }
  }
</script>

<style lang='scss'>
  @import '../../common/scss/tool.scss';
  @import '../../common/scss/_variable.scss';

  .aboutf-component-title {
    & > p {
      font-size: 30px;
      color: #666;
      height: 28px;
      span {
        display: inline-block;
        margin-right: 10px;
        width: 8px;
        height: 100%;
        background: $base-ff6c00;
      }
    }
  }
  .aboutf {
    font-size: 26px;
    &-banner {
      img {
        width: 100%;
      }
    }
    &-collapse {
      padding: 0 30px;
      margin-top: 30px;
      &-container {
        overflow: hidden;
      }
      p {
        color: $base-666;
        text-indent: 2em;
        line-height: 42px;
        font-size: 26px;
      }
      & > p {
        text-align: center;
        font-size: 0;
        span {
          display: inline-block;
          font-size: 30px;
          color: $base-999;
          line-height: 50px;
          transition: all .5s ease;
        }
      }
    }
    &-culture {
      padding: 0 30px;
      ul {
        margin-top: 30px;
        li {
          display: flex;
          justify-content: space-between;
          align-items: center;
          height: 200px;
          background: $base-fff;
          margin: 10px auto;
          padding: 0 50px;
          border-radius: 10px;
          @include border-all-1px(#e5e5e5);
          box-shadow: 0 0 2px 3px $base-f8f8f8;
          img {
            width: 130px;
            height: 130px;
          }
          p {
            font-size: 24px;
            color: $base-666;
            margin-top: 14px;
          }
        }
      }
    }
    &-partner {
      margin-top: 30px;
      & > p {
        margin-left: 30px;
      }
    }
    &-footer {
      margin-top: 30px;
      &-top {
        margin-bottom: 30px;
        display: flex;
        align-items: center;
        padding: 0 30px;
        div {
          align-self: stretch;
          @include vertical-1px(#{$base-e5e5e5});
        }
        img {
          width: 120px;
          margin: 0 auto;
        }
        ul {
          font-size: 24px;
          color: $base-666;
          margin-left: 40px;
          li {
            margin-top: 14px;
            span {
              margin-right: 15px;
              font-size: 30px;
            }
          }
          & li:nth-child(1) {
            margin-top: 0px;
          }
        }
      }
      &-top {
        ul {
          padding-top: 10px;
          span {
            font-size: 36px;
            vertical-align: text-top;
          }
        }
      }
      &-bottom {
        background: $base-f8f8f8;
        text-align: center;
        padding: 10px 0;
        p {
          font-size: 18px;
          line-height: 40px;
          transform : scale(0.8,0.8)
        }
      }
    }
  }
</style>
